<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Dashboard</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <!-- Choices CSS-->
    <link rel="stylesheet" href="/static/vendor/choices.js/public/assets/styles/choices.min.css">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" href="/static/vendor/overlayscrollbars/css/OverlayScrollbars.min.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/static/css/style.default.premium.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/static/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/static/img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <!-- Side Navbar -->
    <nav class="side-navbar">
      <div class="side-navbar-inner">
        <!-- Sidebar Header    -->
        <div class="sidebar-header d-flex align-items-center justify-content-center p-3 mb-3">
          <!-- User Info-->
          <div class="sidenav-header-inner text-center"><a href="pages-profile.html"><img class="img-fluid rounded-circle avatar mb-2" src="img/avatar-7.jpg" alt="person"></a>
            <h2 class="h5 text-white text-uppercase mb-0">Nathan Andrews</h2>
            <p class="text-sm mb-0 text-muted">Web Developer</p>
          </div>
          <!-- Small Brand information, appears on minimized sidebar--><a class="brand-small text-center" href="index.html">
            <p class="h1 m-0">BD</p></a>
        </div>
        <!-- Sidebar Navigation Menus--><span class="text-uppercase text-gray-500 text-sm fw-bold letter-spacing-0 mx-lg-2 heading">Main</span>
        <ul class="list-unstyled">                  
          <li class="sidebar-item"><a class="sidebar-link" href="index.html"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#real-estate-1"> </use>
              </svg>Home </a></li>
          <li class="sidebar-item"><a class="sidebar-link" href="#formsDropdown" data-bs-toggle="collapse"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#survey-1"> </use>
              </svg>Forms </a>
            <ul class="collapse list-unstyled " id="formsDropdown">
              <li><a class="sidebar-link" href="forms.html">Basic forms</a></li>
              <li><a class="sidebar-link" href="forms-advanced.html">Advanced forms</a></li>
              <li><a class="sidebar-link" href="forms-autocomplete.html">Autocomplete</a></li>
              <li><a class="sidebar-link" href="forms-dropzone.html">Files upload</a></li>
              <li><a class="sidebar-link" href="forms-texteditor.html">Text editor</a></li>
              <li><a class="sidebar-link" href="forms-validation.html">Validation</a></li>
            </ul>
          </li>
          <li class="sidebar-item"><a class="sidebar-link" href="#chartsDropdown" data-bs-toggle="collapse"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#sales-up-1"> </use>
              </svg>Charts </a>
            <ul class="collapse list-unstyled " id="chartsDropdown">
              <li><a class="sidebar-link" href="charts.html">Charts</a></li>
              <li><a class="sidebar-link" href="charts-gauge-sparkline.html">Gauge + Sparkline</a></li>
            </ul>
          </li>
          <li class="sidebar-item"><a class="sidebar-link" href="#tablesDropdown" data-bs-toggle="collapse"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#portfolio-grid-1"> </use>
              </svg>Tables </a>
            <ul class="collapse list-unstyled " id="tablesDropdown">
              <li><a class="sidebar-link" href="tables.html">Bootstrap tables</a></li>
              <li><a class="sidebar-link" href="tables-datatable.html">Datatable</a></li>
            </ul>
          </li>
          <li class="sidebar-item"><a class="sidebar-link" href="#componentsDropdown" data-bs-toggle="collapse"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#stack-1"> </use>
              </svg>Components </a>
            <ul class="collapse list-unstyled " id="componentsDropdown">
              <li><a class="sidebar-link" href="components-cards.html">Cards</a></li>
              <li><a class="sidebar-link" href="components-calendar.html">Calendar</a></li>
              <li><a class="sidebar-link" href="components-gallery.html">Gallery</a></li>
              <li><a class="sidebar-link" href="components-loading-buttons.html">Loading buttons</a></li>
              <li><a class="sidebar-link" href="components-map.html">Maps</a></li>
              <li><a class="sidebar-link" href="components-notifications.html">Notifications</a></li>
              <li><a class="sidebar-link" href="components-preloader.html">Preloaders</a></li>
            </ul>
          </li>
          <li class="sidebar-item active"><a class="sidebar-link" href="#pagesDropdown" aria-expanded="aria-expanded" data-bs-toggle="collapse"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#multiple-windows-1"> </use>
              </svg>Pages </a>
            <ul class="collapse list-unstyled show" id="pagesDropdown">
              <li><a class="sidebar-link" href="pages-contacts.html">Contacts</a></li>
              <li><a class="sidebar-link" href="pages-invoice.html">Invoice</a></li>
              <li><a class="sidebar-link" href="login.html">Login page</a></li>
              <li><a class="sidebar-link" href="login-2.html">Login v.2 <span class="badge bg-info">New</span></a></li>
              <li class="active"><a class="sidebar-link" href="pages-profile.html">Profile</a></li>
              <li><a class="sidebar-link" href="pages-pricing.html">Pricing table</a></li>
            </ul>
          </li>
          <li class="sidebar-item"><a class="sidebar-link" href="#!"> 
              <svg class="svg-icon svg-icon-xs svg-icon-heavy me-2">
                <use xlink:href="#imac-screen-1"> </use>
              </svg>Demo
              <div class="badge bg-warning">6 New</div></a></li>
        </ul><span class="text-uppercase text-gray-500 text-sm fw-bold letter-spacing-0 mx-lg-2 heading">Second menu</span>
        <ul class="list-unstyled py-4">
          <li class="sidebar-item"> <a class="sidebar-link" href="#!"> 
              <svg class="svg-icon svg-icon-xs svg-icon-heavy me-2">
                <use xlink:href="#chart-1"> </use>
              </svg>Demo</a></li>
          <li class="sidebar-item"> <a class="sidebar-link" href="">
              <svg class="svg-icon svg-icon-xs svg-icon-heavy me-2">
                <use xlink:href="#imac-screen-1"> </use>
              </svg>Demo
              <div class="badge bg-info">Special</div></a></li>
          <li class="sidebar-item"> <a class="sidebar-link" href=""> 
              <svg class="svg-icon svg-icon-xs svg-icon-heavy me-2">
                <use xlink:href="#quality-1"> </use>
              </svg>Demo</a></li>
          <li class="sidebar-item"> <a class="sidebar-link" href=""> 
              <svg class="svg-icon svg-icon-xs svg-icon-heavy me-2">
                <use xlink:href="#security-shield-1"> </use>
              </svg>Demo</a></li>
        </ul>
      </div>
    </nav>
    <div class="page">
      <!-- navbar-->
      <header class="header mb-5 pb-3">
        <nav class="nav navbar fixed-top">
          <div class="container-fluid">
            <div class="d-flex align-items-center justify-content-between w-100">
              <div class="d-flex align-items-center"><a class="menu-btn d-flex align-items-center justify-content-center p-2 bg-gray-900" id="toggle-btn" href="#">
                  <svg class="svg-icon svg-icon-sm svg-icon-heavy text-white">
                    <use xlink:href="#menu-1"> </use>
                  </svg></a><a class="navbar-brand ms-2" href="index.html">
                  <div class="brand-text d-none d-md-inline-block text-uppercase letter-spacing-0"><span class="text-white fw-normal text-xs">Bootstrap </span><strong class="text-primary text-sm">Dashboard</strong></div></a></div>
              <ul class="nav-menu mb-0 list-unstyled d-flex flex-md-row align-items-md-center">
                <!-- Notifications dropdown-->
                <li class="nav-item dropdown"> <a class="nav-link text-white position-relative" id="notifications" rel="nofollow" data-bs-target="#" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                      <use xlink:href="#chart-1"> </use>
                    </svg><span class="badge bg-warning">12</span></a>
                  <ul class="dropdown-menu dropdown-menu-end mt-sm-3 shadow-sm" aria-labelledby="notifications">
                    <li><a class="dropdown-item py-3" href="#!"> 
                        <div class="d-flex">
                          <div class="icon icon-sm bg-blue">
                            <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                              <use xlink:href="#envelope-1"> </use>
                            </svg>
                          </div>
                          <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-xs text-gray-600">You have 6 new messages </span><small class="small text-gray-600">4 minutes ago</small></div>
                        </div></a></li>
                    <li><a class="dropdown-item py-3" href="#!"> 
                        <div class="d-flex">
                          <div class="icon icon-sm bg-green">
                            <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                              <use xlink:href="#chats-1"> </use>
                            </svg>
                          </div>
                          <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-xs text-gray-600">New 2 WhatsApp messages</span><small class="small text-gray-600">4 minutes ago</small></div>
                        </div></a></li>
                    <li><a class="dropdown-item py-3" href="#!"> 
                        <div class="d-flex">
                          <div class="icon icon-sm bg-orange">
                            <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                              <use xlink:href="#checked-window-1"> </use>
                            </svg>
                          </div>
                          <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-xs text-gray-600">Server Rebooted</span><small class="small text-gray-600">8 minutes ago</small></div>
                        </div></a></li>
                    <li><a class="dropdown-item py-3" href="#!"> 
                        <div class="d-flex">
                          <div class="icon icon-sm bg-green">
                            <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                              <use xlink:href="#chats-1"> </use>
                            </svg>
                          </div>
                          <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-xs text-gray-600">New 2 WhatsApp messages</span><small class="small text-gray-600">10 minutes ago</small></div>
                        </div></a></li>
                    <li><a class="dropdown-item all-notifications text-center" href="#!"> <strong class="text-xs text-gray-600">view all notifications                                            </strong></a></li>
                  </ul>
                </li>
                <!-- Messages dropdown-->
                <li class="nav-item dropdown"> <a class="nav-link text-white position-relative" id="messages" rel="nofollow" data-bs-target="#" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                      <use xlink:href="#envelope-1"> </use>
                    </svg><span class="badge bg-info">10</span></a>
                  <ul class="dropdown-menu dropdown-menu-end mt-sm-3 shadow-sm" aria-labelledby="messages">
                    <li><a class="dropdown-item d-flex py-3" href="#!"> <img class="img-fluid rounded-circle flex-shrink-0 avatar shadow-0" src="img/avatar-1.jpg" alt="..." width="45">
                        <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-sm text-gray-600">Jason Doe</span><small class="small text-gray-600"> Sent You Message</small>
                          <p class="mb-0 small text-gray-600">3 days ago at 7:58 pm - 10.06.2014</p>
                        </div></a></li>
                    <li><a class="dropdown-item d-flex py-3" href="#!"> <img class="img-fluid rounded-circle flex-shrink-0 avatar shadow-0" src="img/avatar-2.jpg" alt="..." width="45">
                        <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-sm text-gray-600">Jason Doe</span><small class="small text-gray-600"> Sent You Message</small>
                          <p class="mb-0 small text-gray-600">3 days ago at 7:58 pm - 10.06.2014</p>
                        </div></a></li>
                    <li><a class="dropdown-item d-flex py-3" href="#!"> <img class="img-fluid rounded-circle flex-shrink-0 avatar shadow-0" src="img/avatar-3.jpg" alt="..." width="45">
                        <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-sm text-gray-600">Jason Doe</span><small class="small text-gray-600"> Sent You Message</small>
                          <p class="mb-0 small text-gray-600">3 days ago at 7:58 pm - 10.06.2014</p>
                        </div></a></li>
                    <li><a class="dropdown-item text-center" href="#!"> <strong class="text-xs text-gray-600">Read all messages       </strong></a></li>
                  </ul>
                </li>
                <!-- Languages dropdown    -->
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle text-white text-sm" id="languages" rel="nofollow" data-bs-target="#" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="img/flags/16/GB.png" alt="English"><span class="d-none d-sm-inline-block ms-2">English</span></a>
                  <ul class="dropdown-menu dropdown-menu-end mt-sm-3 shadow-sm" aria-labelledby="languages">
                    <li><a class="dropdown-item" rel="nofollow" href="#!"> <img class="me-2" src="img/flags/16/DE.png" alt="English"><span>German</span></a></li>
                    <li><a class="dropdown-item" rel="nofollow" href="#!"> <img class="me-2" src="img/flags/16/FR.png" alt="English"><span>French                                                         </span></a></li>
                  </ul>
                </li>
                <!-- Log out-->
                <li class="nav-item"><a class="nav-link text-white text-sm ps-0" href="login.html"> <span class="d-none d-sm-inline-block">Logout</span>
                    <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                      <use xlink:href="#security-1"> </use>
                    </svg></a></li>
              </ul>
            </div>
          </div>
        </nav>
      </header>
      <!-- Breadcrumb-->
      <div class="bg-gray-200 text-sm">
        <div class="container-fluid">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 py-3">
              <li class="breadcrumb-item"><a class="fw-light" href="index.html">Home</a></li>
              <li class="breadcrumb-item active fw-light" aria-current="page">Profile  </li>
            </ol>
          </nav>
        </div>
      </div>
      <!-- Page Header-->
      <header class="py-4">
        <div class="container-fluid py-2">
          <h1 class="h3 fw-normal mb-0">Profile</h1>
        </div>
      </header>
      <section>
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-4">
              <div class="card card-profile">
                <div class="card-header" style="background-image: url(img/photos/paul-morris-116514-unsplash.jpg);"></div>
                <div class="card-body text-center"><img class="card-profile-img" src="img/avatar-7.jpg" title="...">
                  <h3 class="mb-3">Nathan Andrews</h3>
                  <p class="mb-4">One morning, when Gregor Samsa woke from troubled </p>
                  <button class="btn btn-outline-dark btn-sm"><i class="fab fa-twitter"></i> Follow</button>
                </div>
              </div>
              <div class="card">
                <div class="card-body">
                  <div class="d-flex align-items-center"><img class="shadow-0 avatar avatar-lg" src="img/avatar-7.jpg" title="...">
                    <div class="ms-3">
                      <h4>Nathan Andrews</h4>
                      <p class="text-muted mb-0">Coder</p>
                      <ul class="list-inline mb-0 mt-2">
                        <li class="list-inline-item"><a class="text-sm" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="Nathan's Facebook"><i class="fab fa-facebook-f"></i></a></li>
                        <li class="list-inline-item"><a class="text-sm" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="@nathan_andrews"><i class="fab fa-twitter"></i></a></li>
                        <li class="list-inline-item"><a class="text-sm" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="+420777555987"><i class="fas fa-phone"></i></a></li>
                        <li class="list-inline-item"><a class="text-sm" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" title="@nathan"><i class="fab fa-skype"></i></a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <form class="card">
                <div class="card-header">
                  <h3 class="mb-0">My Profile</h3>
                </div>
                <div class="card-body">
                  <div class="row mb-3">
                    <div class="col-auto d-flex align-items-center"><img class="shadow-0 avatar avatar-md" src="img/avatar-7.jpg" title="..."></div>
                    <div class="col">
                      <label class="form-label">Name</label>
                      <input class="form-control" type="text" placeholder="Your name">
                    </div>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Bio</label>
                    <textarea class="form-control" rows="8">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. &quot;What's happened to me?&quot; he thought. It wasn't a dream.</textarea>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input class="form-control" placeholder="you@domain.com">
                  </div>
                  <div class="mb-0">
                    <label class="form-label">Password</label>
                    <input class="form-control" type="password" value="password">
                  </div>
                </div>
                <div class="card-footer text-end">
                  <button class="btn btn-primary">Save</button>
                </div>
              </form>
            </div>
            <div class="col-lg-8">
              <div class="card">
                <div class="card-header border-0">
                  <div class="input-group">
                    <input class="form-control" type="text" placeholder="Message">
                    <button class="btn btn-outline-secondary" type="button"><i class="fas fa-paper-plane"></i></button>
                  </div>
                </div>
                <div class="list-group">
                  <div class="list-group-item border-start-0 border-end-0 py-5 px-lg-4">
                    <div class="d-flex"><img class="shadow-0 avatar avatar-md" src="img/avatar-7.jpg" title="...">
                      <div class="ms-3">
                        <div class="d-flex justify-content-between">
                          <h5>Nathan Andrews</h5><small class="text-nowrap">10 min</small>
                        </div>
                        <div class="text-muted text-sm">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections</div>
                        <div class="d-flex mt-4"><img class="shadow-0 avatar avatar-sm" src="img/avatar-3.jpg" title="...">
                          <div class="ms-3 text-muted text-sm"><strong class="text-dark">Serenity Mitchelle: </strong>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. &quot;What's happened to me?&quot; he thought. It wasn't a dream.</div>
                        </div>
                        <div class="d-flex mt-4"><img class="shadow-0 avatar avatar-sm" src="img/avatar-1.jpg" title="...">
                          <div class="ms-3 text-muted text-sm"><strong class="text-dark">Tony O'Brian: </strong>His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table.</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item border-start-0 border-end-0 py-5 px-lg-4">
                    <div class="d-flex"><img class="shadow-0 avatar avatar-md" src="img/avatar-7.jpg" title="...">
                      <div class="ms-3">
                        <div class="d-flex justify-content-between">
                          <h5>Nathan Andrews</h5><small class="text-muted text-nowrap">12 min</small>
                        </div>
                        <div class="text-muted text-sm">Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</div>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item border-start-0 border-end-0 py-5 px-lg-4">
                    <div class="d-flex"><img class="shadow-0 avatar avatar-md" src="img/avatar-7.jpg" title="...">
                      <div class="ms-3">
                        <div class="d-flex justify-content-between">
                          <h5>Nathan Andrews</h5><small class="text-muted text-nowrap">34 min</small>
                        </div>
                        <div class="text-muted text-sm">He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before.</div>
                        <div class="d-flex mt-4"><img class="shadow-0 avatar avatar-sm" src="img/avatar-6.jpg" title="...">
                          <div class="ms-3 text-muted text-sm"><strong class="text-dark">Javier Gregory: </strong>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <form class="card">
                <div class="card-body">
                  <h3 class="card-title">Edit Profile</h3>
                  <div class="row gy-4">
                    <div class="col-md-5">
                      <label class="form-label">Company</label>
                      <input class="form-control" type="text" placeholder="Company" value="Nathan &amp; Nathan">
                    </div>
                    <div class="col-sm-6 col-md-3">
                      <label class="form-label">Username</label>
                      <input class="form-control" type="text" placeholder="Username" value="nathan">
                    </div>
                    <div class="col-sm-6 col-md-4">
                      <label class="form-label">Email address</label>
                      <input class="form-control" type="email" placeholder="Email">
                    </div>
                    <div class="col-sm-6">
                      <label class="form-label">First Name</label>
                      <input class="form-control" type="text" placeholder="First Name">
                    </div>
                    <div class="col-sm-6">
                      <label class="form-label">Last name</label>
                      <input class="form-control" type="text" placeholder="Last name">
                    </div>
                    <div class="col-md-12">
                      <label class="form-label">Address</label>
                      <input class="form-control" type="text" placeholder="Home address">
                    </div>
                    <div class="col-sm-6 col-md-4">
                      <label class="form-label">City</label>
                      <input class="form-control" type="text" placeholder="City">
                    </div>
                    <div class="col-sm-6 col-md-3">
                      <label class="form-label">ZIP</label>
                      <input class="form-control" type="number" placeholder="ZIP">
                    </div>
                    <div class="col-md-5">
                      <label class="form-label">Country</label>
                      <select class="profile-country-choices" data-customclass="form-select">
                        <option value="uk">UK</option>
                        <option value="us">US</option>
                      </select>
                    </div>
                    <div class="col-md-12">
                      <label class="form-label">About Me</label>
                      <textarea class="form-control" rows="5" placeholder="Here can be your description" value="Mike">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. &quot;What's happened to me?&quot; he thought. It wasn't a dream.</textarea>
                    </div>
                  </div>
                </div>
                <div class="card-footer text-end">
                  <button class="btn btn-primary" type="submit">Update Profile</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>
      <footer class="main-footer w-100 position-absolute bottom-0 start-0 py-2" style="background: #222">
        <div class="container-fluid">
          <div class="row text-center gy-3">
            <div class="col-sm-6 text-sm-start">
              <p class="mb-0 text-sm text-gray-600">Your company &copy; 2017-2023</p>
            </div>
            <div class="col-sm-6 text-sm-end">
              <p class="mb-0 text-sm text-gray-600">Version 2.1.1</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <button class="btn btn-primary btn-sm d-none d-md-inline-block" type="button" data-bs-toggle="collapse" data-bs-target="#style-switch" id="style-switch-button"><i class="fas fa-cog fa-2x"></i></button>
    <div class="collapse" id="style-switch">
      <h5 class="mb-3">Select theme colour</h5>
      <form class="mb-3">
        <select class="form-select" name="colour" id="colour">
          <option value="">select colour variant</option>
          <option value="css/style.default.premium.css">green</option>
          <option value="css/style.red.premium.css">red</option>
          <option value="css/style.violet.premium.css">violet</option>
          <option value="css/style.pink.premium.css">pink</option>
          <option value="css/style.sea.premium.css">sea</option>
          <option value="css/style.blue.premium.css">blue</option>
        </select>
      </form>
      <p><img class="img-fluid" src="img/template-mac.png" alt=""></p>
      <p class="text-muted text-xs">Stylesheet switching is done via JavaScript and can cause a blink while page loads. This will not happen in your production code.</p>
    </div>
    <!-- JavaScript files-->
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="vendor/chart.js/Chart.min.js"></script>
    <script src="vendor/just-validate/js/just-validate.min.js"></script>
    <script src="vendor/choices.js/public/assets/scripts/choices.min.js"></script>
    <script src="vendor/overlayscrollbars/js/OverlayScrollbars.min.js"></script>
    <script src="js/demo.js"> </script>
    <!-- Main File-->
    <script src="js/front.js"></script>
    <script>
      // ------------------------------------------------------- //
      //   Inject SVG Sprite - 
      //   see more here 
      //   https://css-tricks.com/ajaxing-svg-sprite/
      // ------------------------------------------------------ //
      function injectSvgSprite(path) {
      
          var ajax = new XMLHttpRequest();
          ajax.open("GET", path, true);
          ajax.send();
          ajax.onload = function(e) {
          var div = document.createElement("div");
          div.className = 'd-none';
          div.innerHTML = ajax.responseText;
          document.body.insertBefore(div, document.body.childNodes[0]);
          }
      }
      // this is set to BootstrapTemple website as you cannot 
      // inject local SVG sprite (using only 'icons/orion-svg-sprite.svg' path)
      // while using file:// protocol
      // pls don't forget to change to your domain :)
      injectSvgSprite('icons/orion-svg-sprite.svg'); 
      
      
    </script>
    <!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </body>
</html>